<template>
  <view class="container">
    <!-- 出发地和目的地输入框 -->
    <view class="input-wrapper">
      <view class="input-container">
        <input
          v-model="startPlace"
          placeholder="出发地"
          placeholder-style="text-align: center"
          @click="chooseTo('from')"
        />
      </view>
      <!-- 高铁图标 -->
      <view class="iconfont-gaotie" @click="swapPlaces">
        <text class="icon-symbol icon-symbol-gaotie"></text>
      </view>
      <view class="input-container">
        <input
          v-model="endPlace"
          placeholder="目的地"
          placeholder-style="text-align: center"
          @click="chooseTo('to')"
        />
      </view>
    </view>
    <!-- 点击跳转到攻略页面 -->
    <button type="primary" @click="generateStrategy">一键生成攻略</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      startPlace: '', // 出发地
      endPlace: '' // 目的地
    };
  },
  methods: {
    // 交换出发地和目的地
    swapPlaces() {
      const temp = this.startPlace;
      this.startPlace = this.endPlace;
      this.endPlace = temp;
    },
    // 生成攻略
    generateStrategy() {
      if (!this.startPlace || !this.endPlace) {
        uni.showToast({
          title: '请输入目的地和出发地',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      uni.redirectTo({
        url: `/pages/strategypage/strategypage?startPlace=${encodeURIComponent(
          this.startPlace
        )}&endPlace=${encodeURIComponent(this.endPlace)}`
      });
    },
    // 选择出发地或目的地时跳转
    chooseTo(type) {
      let url = '';
      if (type === 'from') {
        url = `/pages/chooseLocation/chooseLocation?type=from&current=${encodeURIComponent(
          this.startPlace
        )}`;
      } else if (type === 'to') {
        url = `/pages/chooseLocation/chooseLocation?type=to&current=${encodeURIComponent(
          this.endPlace
        )}`;
      }
      console.log('跳转 URL:', url);
      uni.navigateTo({ url });
    },
    // 监听城市选择事件
    handleCitySelected(data) {
      if (data.type === 'from') {
        this.startPlace = data.city;
        console.log('出发地：', this.startPlace);
      } else if (data.type === 'to') {
        this.endPlace = data.city;
        console.log('目的地：', this.endPlace);
      }
    }
  },
  mounted() {
    // 在组件挂载时监听事件
    uni.$on('citySelected', this.handleCitySelected);
    console.log('已监听事件');
  },
  beforeDestroy() {
    // 在组件销毁前移除监听
    uni.$off('citySelected', this.handleCitySelected);
    console.log('已移除事件监听');
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.input-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.input-container {
  display: flex;
  align-items: center;
  width: 30%;
}

.input-container text {
  width: 80px;
}

.input-container input {
  flex: 1;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
}

button {
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
}

.iconfont-gaotie {
  cursor: pointer; /* 添加鼠标指针样式，提示可点击 */
}
</style>